<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div>
        <span class="title">JSPGOU单店版</span>
        <el-radio-group style="margin-bottom: 20px"> </el-radio-group>
      </div>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->

      <el-aside>
        <el-tabs
          v-model="activeName"
          :tab-position="tabPosition"
          type="border-card"
          @tab-click="handleClick"
        >
          <el-tab-pane  name="one">
            <span slot="label"><i class="el-icon-s-platform"></i> 工作台</span>
            <div>
              <span class="item">工作台</span>
              <hr />
            </div>
          </el-tab-pane>
          <el-tab-pane  name="two">
            <span slot="label"><i class="el-icon-s-custom"></i> 用户</span>

            <div>
              <span class="item">用户</span>
              <hr />
              <el-menu
              
                default-active="activeIndex"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                 router
                 index="1"
              >
                <el-submenu index="1">
                  <template slot="title">
                    <span>用户管理</span>
                  </template>

                  <el-menu-item index="/h0" title="全部用户" @click="addTab">
                   <template>全部用户
                    </template>
                  </el-menu-item>

                  <el-menu-item index="/h1" title="用户等级"  @click="addTab" >用户等级</el-menu-item>

                  <el-menu-item index="">用户标签</el-menu-item>

                  <el-menu-item index="">黑名单</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <span>权益管理</span>
                  </template>

                  <el-menu-item index="">权益卡</el-menu-item>

                  <el-menu-item index="">权益项</el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <span>资产管理</span>
                  </template>

                  <el-menu-item index="">积分设置</el-menu-item>

                  <el-menu-item index="">储值管理</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>

          <el-tab-pane name="three">
            <span slot="label"><i class="el-icon-menu"></i> 商品</span>

            <div>
              <span class="item">商品</span>
              <hr />
              <el-menu>
                <el-submenu index="4">
                  <template slot="title">
                    <span>商品管理</span>
                  </template>

                  <el-menu-item index="">全部商品</el-menu-item>

                  <el-menu-item index="">发布商品</el-menu-item>

                  <el-menu-item index="">商品标签</el-menu-item>
                  <el-menu-item index="">品牌管理</el-menu-item>

                  <el-menu-item index="">商品类目</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>

          <el-tab-pane name="four">
            <span slot="label"><i class="el-icon-s-order"></i> 交易</span>

            <div>
              <span class="item">交易</span>
              <hr />
              <el-menu>
                <el-submenu index="5">
                  <template slot="title">
                    <span>商品管理</span>
                  </template>

                  <el-menu-item index="">全部订单</el-menu-item>

                  <el-menu-item index="">售后维权</el-menu-item>

                  <el-menu-item index="">快速发货</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>

          <el-tab-pane name="five">
            <span slot="label"><i class="el-icon-s-marketing"></i> 运营</span>

            <div>
              <span class="item">运营</span>
              <hr />
              <el-menu
               default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#ebeff2"
                text-color="#000"
                active-text-color="#ffd04b"
              >
                <el-submenu index="6">
                  <template slot="title">
                    <span>店铺工具</span>
                  </template>

                  <el-menu-item index="">运费模板</el-menu-item>

                  <el-menu-item index="">运单模板</el-menu-item>

                  <el-menu-item index="">商品评价</el-menu-item>
                  <el-menu-item index="">购买咨询</el-menu-item>

                  <el-menu-item index="">意见反馈</el-menu-item>
                </el-submenu>
                <el-submenu index="7">
                  <template slot="title">
                    <span>营销中心</span>
                  </template>

                  <el-menu-item index="">优惠券</el-menu-item>

                  <el-menu-item index="">积分商城</el-menu-item>
                </el-submenu>
                <el-submenu index="8">
                  <template slot="title">
                    <span>店铺装修</span>
                  </template>

                  <el-menu-item index="">首页设置</el-menu-item>

                  <el-menu-item index="">页面管理</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>
          <el-tab-pane name="six">
            <span slot="label"><i class="el-icon-s-data"></i> 数据</span>

            <div>
              <span class="item">数据</span>
              <hr />

              <el-menu>
                <el-submenu index="9">
                  <template slot="title">
                    <span>概况分析</span>
                  </template>

                  <el-menu-item index="">数据概况</el-menu-item>

                  <el-menu-item index="">客流分析</el-menu-item>

                  <el-menu-item index="">用户分析</el-menu-item>
                  <el-menu-item index="">商品分析</el-menu-item>

                  <el-menu-item index="">交易分析</el-menu-item>

                  <el-menu-item index="">统计设置</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>
          <el-tab-pane name="seven">
            <span slot="label"><i class="el-icon-s-finance"></i> 财务</span>

            <div>
              <span class="item">财务</span>
              <hr />
              <el-menu>
                <el-submenu index="10">
                  <template slot="title">
                    <span>财务管理</span>
                  </template>

                  <el-menu-item index="">财务概况</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>
          <el-tab-pane name="eight">
            <span slot="label"><i class="el-icon-share"></i> 渠道</span>

            <div>
              <span class="item">渠道</span>
              <hr />

              <el-menu>
                <el-submenu index="11">
                  <template slot="title">
                    <span>公众号</span>
                  </template>

                  <el-menu-item index="">公众号设置</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>

          <el-tab-pane name="nine">
            <span slot="label"><i class="el-icon-s-tools"></i> 设置</span>

            <div>
              <span class="item">设置</span>
              <hr />
              <el-menu>
                <el-submenu index="12">
                  <template slot="title">
                    <span>系统设置</span>
                  </template>

                  <el-menu-item index="">消息设置</el-menu-item>
                  <el-menu-item index="">邮件设置</el-menu-item>
                  <el-menu-item index="">短信设置</el-menu-item>
                  <el-menu-item index="">快捷登录</el-menu-item>
                  <el-menu-item index="">存储设置</el-menu-item>
                  <el-menu-item index="">快递公司</el-menu-item>
                  <el-menu-item index="">区域设置</el-menu-item>
                  <el-menu-item index="">操作日志</el-menu-item>
                  <el-menu-item index="">系统信息</el-menu-item>
                  <el-menu-item index="">文章分类</el-menu-item>
                  <el-menu-item index="">文章管理</el-menu-item>
                </el-submenu>
              </el-menu>
            </div>
          </el-tab-pane>
          <el-tab-pane name="ten">
            <span slot="label"><i class="el-icon-s-check"></i> 服务市场</span>
            
            <div>
              <span class="item">服务市场</span>
              <hr />


            </div>
          </el-tab-pane>
        </el-tabs>
      </el-aside>
      <!-- 主要区 -->
      <el-main>
        
    
  <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" tab-click="">

  <el-tab-pane
    v-for="(item) in editableTabs"
    :key="item.name"
    :label="item.title"
    :name="item.name"
  >

  <router-view> </router-view>
    
  </el-tab-pane>
</el-tabs>
        
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeName: "one",
      tabPosition: "left",
      activeIndex: this.$route.name,
      editableTabsValue: '工作台',
       editableTabs: [{
         title: '工作台',
          name: '1',
        
         
        }, ],
       tabIndex: 1,
    };
  },

  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  a(e){
    console.log(e)
  },
    addTab(targetName) {
       console.log(targetName)
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
         title: targetName.index,
          name: newTabName,

        });
        this.editableTabsValue = newTabName;
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },

  }
};
</script>

<style scoped>
.title {
  color: #fff;
  background-color: #333;
  font-size: 26px;
  font-weight: bolder;
  display: block;
  margin-top: 10px;
}
.item {
  display: block;
  margin: -72px 2px;
}
.el-container {
  height: 100%;
  display: flex;
}
.el-header {
  background-color: #333;
}
.el-main {
  background-color: #ecf0f5;
}
.el-aside {
  background-color: #ecf0f5;
  color: #333;
  text-align: center;
  line-height: 200px;
  height: 100%;
  width: 226px;
}
.el-submenu .el-menu-item {
  min-width: 140px;
}
.el-tabs__header {
  width: 70px;
  background-color: #54667a;
}
</style>